<template>
  <div class="list">
    <p class="like">猜你喜欢</p>
    <ul class="storeList">
      <router-link :to="{path:'/goods'}" tag="li" v-for="item in homeList" :key="item.id">
        <!-- 图片区 -->
        <div class="img">
          <img :src="item.imgsrc" alt="商家图片" />
        </div>
        <!-- 商家信息区 -->
        <div class="storeInfo">
          <!-- 商家名 -->
          <div>{{item.title}}</div>
          <!-- 类型+商店位置 -->
          <div>{{item.type}}</div>
          <!-- 价格+售卖数量 -->
          <div>
              <span>{{item.price}}</span>
              <span>元</span>
              <span>门市价:{{item.storePrice}}</span>
              <span>已售{{item.sell}}</span>
              <!-- 73元门市价：75元 已售40000件 -->
            </div>
        </div>
      </router-link>
    </ul>
    <div class="all">
        <div>查看全部团购</div>
        <i class="iconfont iconiconset0420"></i>
    </div>
  </div>
</template>
   
<script>
export default {
  data() {
    return {
      homeList: [
        {
          id: 0,
          imgsrc:
            "http://p0.meituan.net/200.0/deal/8904a2142b3f1d8be2c4c4557c921fd793985.jpg@117_0_468_468a%7C267h_267w_2e_90Q",
          title: "五谷香自助涮烤火锅",
          type: "[韦曲西街]单人自助餐",
          price: 39.8,
          storePrice: 49,
          sell: 180600
        },
        {
          id: 1,
          imgsrc:
            "http://p1.meituan.net/100.0/deal/1b6cf5d6c12217acb41984c8d215826c67573.jpg",
          title: "黑面蔡",
          type: "[2店通用]饮品16选1，提供免费WiFi",
          price: 8.8,
          storePrice: 10,
          sell: 130671
        },
        {
          id: 2,
          imgsrc:
            "http://p0.meituan.net/100.0/deal/9348ceda43461e7de1fc981857b7e33932122.jpg@58_0_417_417a%7C267h_267w_2e_90Q",
          title: "蘭芳園",
          type: "[三森]饮品1选1，包间免费",
          price: 12.9,
          storePrice: 16,
          sell: 11393
        },
        {
          id: 3,
          imgsrc:
            "http://p0.meituan.net/100.0/deal/11c8553e7d2d9e64d388dc5c47c77a304995772.jpg@560_0_2240_2240a%7C267h_267w_2e_90Q",
          title: "享遇牛排海鲜自助餐厅",
          type: "[小寨]午晚通用自助",
          price: 73.9,
          storePrice: 99,
          sell: 28906
        },
        {
          id: 4,
          imgsrc:
            "http://p1.meituan.net/100.0/deal/046652779183f181c0d432a2e57ba11e156417.jpg@267h_267w_2e_90Q",
          title: "阿香米线",
          type: "[西安等]50元全场通用代金券1张，可叠加",
          price: 45,
          storePrice: 50,
          sell: 1006789
        },
        {
          id: 5,
          imgsrc:
            "http://p1.meituan.net/100.0/deal/7687cc415ba8f5378f8ec01a9d131ccc53175.jpg@0_116_467_467a%7C267h_267w_2e_90Q",
          title: "爱辣屋",
          type: "[南稍门]美味双人餐，提供免费WiFi",
          price: 49,
          storePrice: 58,
          sell: 298078
        },
        {
          id: 6,
          imgsrc:
            "http://p1.meituan.net/100.0/deal/b755c7e334a1f66c2832200a0fd0915230845.jpg@142_0_436_436a%7C267h_267w_2e_90Q",
          title: "汉巴味德自助餐厅",
          type: "[小寨]午晚通用单人餐",
          price: 89,
          storePrice: 99,
          sell: 23567
        },
        {
          id: 7,
          imgsrc:
            "http://p1.meituan.net/100.0/deal/4082d30ce1c94f376baf66a71f97c836103011.jpg@196_0_569_569a%7C267h_267w_2e_90Q",
          title: "和谐港烧烤火锅海鲜自助",
          type: "[小寨]单人自助餐",
          price: 78,
          storePrice: 99,
          sell: 25672
        },
        {
          id: 8,
          imgsrc:
            "http://p0.meituan.net/100.0/deal/ad1e4446acc7b4d717d3ef384e686111220592.jpg@504_0_1552_1552a%7C267h_267w_2e_90Q",
          title: "比格比萨自助",
          type: "[钟楼/鼓楼]比格披萨钟楼店58元午晚餐二选一，免费WiFi",
          price: 65,
          storePrice: 71,
          sell: 1267323
        }
      ]
    };
  }
};
</script>
   
<style scoped lang="less">
.list {
  height: auto; /**auto表示自动，高度由子元素撑开的 */
  background: white;
  margin-top: 0.266667rem;
  border-top: 1px solid #ddd8ce;
  border-bottom: 1px solid #ddd8ce;
  p {
    font-size: 0.453333rem;
    line-height: 1.106667rem;
    height: 1.106667rem;
    color: #333;
    padding-left: 0.266667rem;
  }
  .storeList {
    li {
      border-top: 1px solid #ddd8ce;
      padding: 0.373333rem 0.266667rem;
      display: flex; /**弹性布局 */
      .img {
        img {
          width: 2.4rem;
          height: 2.186667rem;
        }
      }
      .storeInfo {
          flex: 1;
          margin-left: .266667rem;
        //   & div等价于.storeInfo div，&相当于当前父级元素
        & div:nth-of-type(1) {
          color: #333;
          font-size: .4rem;
          line-height: 1.5;
        }
        & div:nth-of-type(2) {
          color: #666;
          line-height: 1.5;
          white-space: nowrap;/**禁止文本换行 */
          overflow: hidden;/**隐藏超出部分 */
          text-overflow: ellipsis;/**将超出文本显示成省略号 */
          /* 注意：经过测试，元素必须具有定量的宽度才可以添加省略号*/
          width: 6.133333rem;
        }
        & div:nth-of-type(3) {
          color: #666;
          line-height: .4rem;
          margin-top: .533333rem;
            // 现价
          & span:nth-of-type(1){
              color: #F60;
              font-size: 0.4rem;
          }
            //   元
          & span:nth-of-type(2){
              color: #F60;
          }
            //   已售
          & span:nth-of-type(4){
              float: right;
          }
        }
      }
    }
  }
  .all{
      height: 1.106667rem;
      display: flex;/**弹性布局 */
      line-height: 1.106667rem;
      div{
          margin-left: .266667rem;
          flex: 1;
          font-size: 0.453333rem;
          color: #F60;
      }
      i{
          font-size: .4rem;
          margin-right: .266667rem;
      }
  }
}
</style>